<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            border: red 1px solid;
            width: 300px;
            height: 100px;
            margin: 20px 30px;
            padding: 20px;
        }
        #div_1{
            clear:both;
            background-color:#FF3366;
        }
    </style>
    <script type="text/javascript">
        var count = 2;
        // var div = document.querySelector('#box');

        //创建元素节点
        // var newH2 = document.createElement('h2');
        // var txt = document.createTextNode('我是新添加的H2');
        // newH2.appendChild(txt);
        // // 添加子元素节点
        // div.appendChild(newH2);
        // 增加方式一：给第一个div区域添加文本
        function addText(){
            if (count%2 ==0){
                //1.获取要添加文本内容的节点
                var elementById = document.getElementById("div_1");
                //创建元素节点
                var newH2 = document.createElement('h2');
                //2.创建一个文本节点。document对象的createTextNode(文本内容)方法。
                var text = document.createTextNode("封校三天 快乐无边");
                //3.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法
                newH2.appendChild(text);
                //添加子元素节点
                elementById.appendChild(newH2);
                count ++;
                console.log(count)
            }else {
                //1.获取块节点
                var elementById = document.getElementById("div_1");
                //2.获取子节点，即文本节点
                var childNode = elementById.childNodes[0];
                elementById.removeChild(childNode);
                var h2 = document.getElementById('h2');
                // elementById.removeChild(h2);
                count++;
                console.log(count)
            }


        }




    </script>
</head>
<body>

<div id="div_1"></div>
<input type="button" value="增加文本再次点击消失" onclick="addText()" />
<!--<input type="button" value="删除第一区域的文本内容" onclick="deleteText('div_1')" />-->
</body>
</html>